<template>
  <div style="padding: 16px; display: flex">
    <div class="circle">
      <svg-icon icon-class="alarm" style="font-size: 40px"></svg-icon>
    </div>

    <div style="padding-left: 20px">
      <p style="font-size: 32px; font-weight: 800; color: #606266">2</p>
      <p style="color: #909399; font-size: 13px">未恢复告警</p>
    </div>

    <div style="padding-left: 35px; margin-top: -8px">
      <ul class="infinite-list" style="overflow: auto; max-height: 85px">
        <div v-for="item in appIdAlarms" :key="item.id">
          <a href="" target="_blank">
            <Tag :color="alarmMap[item.level].color">{{ alarmMap[item.level].name }}</Tag>
            <Tag :color="alarmMap[item.level].color" style="opacity: 0.8"> IP：{{ item.ip }}，告警：{{ item.message }} </Tag>
          </a>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Monitor',
  data() {
    return {
      appIdAlarms: [
        { id: 1, level: 'High', ip: '测试1', message: '测试1' },
        { id: 2, level: 'Disaster', ip: '测试2', message: '测试2' },
        { id: 3, level: 'Warning', ip: '测试3', message: '测试3' }
      ],
      alarmMap: {
        Disaster: { name: 'P0', color: 'error' },
        High: { name: 'P1', color: 'warning' },
        Warning: { name: 'P2', color: 'red' },
        Average: { name: 'P3', color: 'orange' }
      }
    }
  },
  computed: {},
  mounted() {},
  methods: {}
}
</script>

<style scoped>
.circle {
  width: 70px;
  height: 70px;
  padding: 12px;
  border-radius: 4em;
  background: #ebeffc;
  text-align: center;
}
</style>
